<template>
  <l-layout class="l-tab-page">
    <l-panel :title="$t('二维码示例')">
      <div style="width:100%;" class="pd-16 flex flex-c-center">
        <l-barcode format="qr" v-bind="params" />
      </div>
      <div style="width: 800px;margin: auto;padding-top: 32px; ">
        <el-form
          :model="params"
          size="mini"
          labelPosition="right"
          labelWidth="110px"
          ref="form"
        >
          <el-row :gutter="0">
            <div class="l-rblock">
              <el-col :span="24">
                <el-form-item label="条码内容:">
                  <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                    v-model="params.value"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="纠错等级">
                  <l-select
                    :options="errorCorrectionLevelOptions"
                    v-model="params.correctLevel"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="条码大小" prop="size">
                  <el-input-number
                    v-model="params.size"
                    controls-position="right"
                    :min="40"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="条码边距">
                  <el-input-number
                    v-model="params.margin"
                    controls-position="right"
                    :min="0"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="条码颜色">
                  <l-input-color v-model="params.color" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="背景颜色">
                  <l-input-color v-model="params.background" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="logo">
                  <l-upload
                    accept=".jpeg,.jpg,.png"
                    :showFileList="false"
                    :isNotUpLoad="true"
                    isTip
                    maxSize="100"
                    sizeType="MB"
                    :limit="1000"
                    :btnText="$t('选择Logo')"
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
            </div>
          </el-row>
        </el-form>
      </div>
    </l-panel>
  </l-layout>
</template>

<script>
export default {
  data() {
    return {
      params: {
        value: "www.learun.cn", // 输入文本内容
        correctLevel: 0, // 纠错等级
        size: 200, //
        margin: 10, // 留白大小
        color: "#000000", // 前景颜色
        background: "#FFFFFF", // 背景颜色
        logoImage: "", // logo图片
      },
      errorCorrectionLevelOptions: [
        { label: "Level L (7%)", value: 0 },
        { label: "Level M (15%)", value: 1 },
        { label: "Level Q (25%)", value: 2 },
        { label: "Level H (30%)", value: 3 },
      ],
    };
  },
  methods: {
    handleChange(fileUrl) {
      this.params.logoImage = fileUrl;
    },
  },
};
</script>
